import React, { useRef } from "react";
import { Form, Input, Button, message, Row, Col } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import SendCode from "./SendCode";
import { sendEmailCode, loginByEmailCode } from "@/api/login";
import { useHistory } from "react-router-dom";
const EmailLogin = () => {
    const emailFormRef = useRef();
    const sendCodeRef = useRef();
    const history = useHistory();
    return (
        <>
            <Form
                validateTrigger="onBlur"
                ref={emailFormRef}
                onFinish={formData => {
                    loginByEmailCode(formData).then(res => {
                        if (res.code === 200) {
                            message.success("登陆成功");
                            setTimeout(() => {
                                history.push("/main");
                            }, 500);
                        }
                    });
                }}
                labelCol={{ span: 5 }}
            >
                <Form.Item
                    name="email"
                    rules={[
                        { required: true, message: "请输入邮箱" },
                        { type: "email", message: "邮箱格式错误" },
                    ]}
                >
                    <Input size="large" prefix={<UserOutlined />} placeholder="邮箱" />
                </Form.Item>
                <Form.Item>
                    <Row gutter={15}>
                        <Col span={16}>
                            <Form.Item
                                name="code"
                                rules={[
                                    { required: true, message: "请输入验证码" },
                                    { len: 6, message: "验证码长度应为6" },
                                ]}
                            >
                                <Input maxLength={6} size="large" prefix={<LockOutlined />} placeholder="验证码" />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <SendCode
                                childRef={sendCodeRef}
                                send={() => {
                                    return new Promise((resolve, reject) => {
                                        let email = emailFormRef.current.getFieldValue("email");
                                        emailFormRef.current
                                            .validateFields(["email"])
                                            .then(res => {
                                                sendEmailCode({ email }).then(res => {
                                                    if (res.code === 200) {
                                                        resolve();
                                                        message.success("发送成功");
                                                    } else {
                                                        reject();
                                                        message.error(res.message);
                                                    }
                                                });
                                            })
                                            .catch(err => {
                                                reject();
                                            });
                                    });
                                }}
                            />
                        </Col>
                    </Row>
                </Form.Item>
                <Form.Item>
                    <Button htmlType="submit" size="large" block type="primary">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </>
    );
};

export default EmailLogin;
